import { Component, OnInit, OnChanges, Input, SimpleChanges } from '@angular/core';
import { Assembly } from '../../../fb-design.model';
import { FormGroup } from '@angular/forms';

@Component({
    selector: 'qk-radio',
    template: `
    <ng-container [formGroup]="form">
        <div class="ui-g" [ngStyle]="assembly.attributes.style">
            <!--设计模式-->
            <ng-container *ngIf="mode==1">
                <!--垂直布局-->
                <div style="width:100%;height:100%;" *ngIf="assembly.attributes.angle == 2">
                    <div class="ui-g-12" *ngFor="let option of options">    
                        <p-radioButton name="{{assembly.name || assembly.id}}" label="{{option.label}}" value="{{option.value}}"></p-radioButton>
                    </div>
                </div>
                <!--水平布局-->
                <div style="width:100%;height:100%;" *ngIf="assembly.attributes.angle != 2">   
                    <p-radioButton *ngFor="let option of options" name="{{assembly.name || assembly.id}}" label="{{option.label}}" value="{{option.value}}" [ngStyle]="{'margin-right':'15px'}"></p-radioButton>
                </div>
            </ng-container>
            <!--编辑模式-->
            <ng-container *ngIf="mode==2">
                <!--垂直布局-->
                <div style="width:100%;height:100%;" *ngIf="assembly.attributes.angle == 2">
                    <div class="ui-g-12" *ngFor="let option of options">    
                        <p-radioButton [formControlName]="assembly.id" name="{{assembly.name || assembly.id}}" label="{{option.label}}" value="{{option.value}}"></p-radioButton>
                    </div>
                </div>
                <!--水平布局-->
                <div style="width:100%;height:100%;" *ngIf="assembly.attributes.angle != 2">   
                    <p-radioButton [formControlName]="assembly.id" *ngFor="let option of options" name="{{assembly.name || assembly.id}}" label="{{option.label}}" value="{{option.value}}" [ngStyle]="{'margin-right':'15px'}"></p-radioButton>
                </div>
            </ng-container>
        </div>
        <div *ngIf="formErrors[assembly.id]" class="alert alert-danger">
            <i class="fa fa-times"></i>{{formErrors[assembly.id]}}
        </div>
    </ng-container>
    `,
    styles: [``],
    providers: []
})
export class QkRadio implements OnInit {
    @Input() assembly: Assembly;
    @Input() form: FormGroup;
    @Input() formErrors: any = {}; 
    @Input() mode: number;
    options: any[] = [{ 'label': '是', 'value': '1' }, { 'label': '否', 'value': '2' }]
    constructor() { }

    ngOnInit() {
        if(this.mode == 2){
            if(1 == this.assembly.authCode){//只读
                $("#mask_"+this.assembly.id).css({'z-index': 1, 'opacity': 0.5, 'background-color':'lightgray'});
            }else if(0 == this.assembly.authCode){//没有权限
                $("#mask_"+this.assembly.id).css({'z-index': 1, 'background-color':'lightgray'});
            }
        }
        if (this.assembly.configs && this.assembly.configs.items) {
            this.options = JSON.parse(this.assembly.configs.items) || this.options;
        } else {
            this.assembly.configs.items = JSON.stringify(this.options);
        }
    }

    ngDoCheck() {
        if(this.mode == 1){
            if (this.assembly.configs && this.assembly.configs.items) {
                this.options = JSON.parse(this.assembly.configs.items) || this.options;
            } else {
                this.assembly.configs.items = JSON.stringify(this.options);
            }
        }
        this.assembly.attributes.refreshStyle();
    }
}